<template>
	<view class="user">
		<view class="user-container">
			<view class="user-info">
				<view class="avatar">
					<image :src="userInfo.avatar || '/static/images/f.png'"></image>
				</view>
				<view class="info" v-if="userInfo">
					<view class="username">{{ userInfo.nickname }}</view>
					<view class="id">ID: {{ userInfo.uid }}</view>
				</view>
				<view class="info go-login" v-else @click="goLogin('/pages/user/index')">
					立即登录
				</view>

				<view class="setting-btn iconfont icon-shezhi"></view>
			</view>


			<view class="order">
				<van-cell title="订单中心" value="查看全部" :border="true" is-link url="/pages/order_list/order_list?idx=0" />
				<van-grid column-num="5">
					<van-grid-item text="待付款" @click="onGoOrderList(0)">
						<view slot="icon" class="order-icon">
							<image src="/static/images/order1.png"></image>
							<text class="num">1</text>
						</view>
					</van-grid-item>
					<van-grid-item text="待发货" @click="onGoOrderList(1)">
						<view slot="icon" class="order-icon">
							<image src="/static/images/order2.png"></image>
						</view>
					</van-grid-item>
					<van-grid-item text="待收货" @click="onGoOrderList(2)">
						<view slot="icon" class="order-icon">
							<image src="/static/images/order3.png"></image>
						</view>
					</van-grid-item>
					<van-grid-item text="待评价" @click="onGoOrderList(3)">
						<view slot="icon" class="order-icon">
							<image src="/static/images/order4.png"></image>
						</view>
					</van-grid-item>
					<van-grid-item text="售后/退款" @click="onGoOrderList(4)">
						<view slot="icon" class="order-icon">
							<image src="/static/images/order5.png"></image>
						</view>
					</van-grid-item>
				</van-grid>
			</view>

			<view class="services">
				<van-cell title="我的服务" :border="true" />
				<van-grid column-num="4">
					<van-grid-item text="地址信息">
						<view slot="icon" class="order-icon" @click="onGoAddressList()">
							<text class="iconfont icon-dizhi"></text>
						</view>
					</van-grid-item>
				</van-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		tabBarUrl
	} from '@/config/pages'
	import authorizationMixin from '@/mixins/authorization'
	import VanCell from '@/wxcomponents/vant/cell/index'
	import VanGrid from '@/wxcomponents/vant/grid/index'
	import VanGridItem from '@/wxcomponents/vant/grid-item/index'
	export default {
		mixins: [authorizationMixin],
		components: {
			VanCell,
			VanGrid,
			VanGridItem
		},
		data() {
			return {

			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		methods: {
			goLogin(pagePath) {
				const job = {
					name: '用户中心',
					// 自定义函数
					funcs: []
				}

				job.funcs.push({
					body: (pagePath) => {
						if (tabBarUrl.includes(pagePath)) {
							uni.switchTab({
								url: pagePath
							})
						} else {
							uni.redirectTo({
								url: pagePath
							})
						}
					},
					args: [pagePath],
					delay: 0
				})

				this.needLoginCheckClickHandler(job)
			},
			onGoOrderList(idx) {
				const pagePath = `/pages/order_list/order_list?idx=${idx}`
				if (!this.isLogined()) {
					this.goLogin(pagePath)
					return false
				}
				uni.navigateTo({
					url: pagePath
				})
			},
			onGoAddressList () {
				const pagePath = '/pages/address_list/address_list'
				if (!this.isLogined()) {
					this.goLogin(pagePath)
					return false
				}
				uni.navigateTo({
					url: pagePath
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		min-height: 100vh;
		background-color: #f5f5f5;

		&-container {
			.user-info {
				position: relative;
				display: flex;
				width: 100%;
				height: 190rpx;
				padding: 34rpx 28rpx;
				background: #e93323;
				box-sizing: border-box;

				&::after {
					position: absolute;
					left: 0;
					right: 0;
					bottom: -98rpx;
					content: "";
					height: 100rpx;
					width: 100%;
					border-radius: 0 0 50% 50%;
					background-color: #e93323;
				}

				.avatar {
					image {
						display: block;
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}

				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					padding: 14rpx 0;
					margin-left: 20rpx;

					&.go-login {
						justify-content: center;
						color: #fff;
					}

					.username {
						color: #fff;
						font-size: 30rpx;
					}

					.id {
						font-size: 26rpx;
						color: hsla(0, 0%, 100%, .6);
					}
				}

				.setting-btn {
					color: #fff;
					font-size: 40rpx;
					margin-top: 20rpx;
				}
			}

			.order {
				padding: 0 20rpx;
				margin-top: 20rpx;

				.order-icon {
					position: relative;

					image {
						width: 48rpx;
						height: 42rpx;
					}

					.num {
						min-width: 12rpx;
						background-color: #fff;
						color: #ee5a52;
						border-radius: 30rpx;
						position: absolute;
						right: -14rpx;
						font-size: 20rpx;
						padding: 0 10rpx;
						border: 2rpx solid #ee5a52;
					}
				}
			}

			.services {
				padding: 0 20rpx;
				margin-top: 20rpx;

				::v-deep .van-grid {
					background-color: #fff;
				}

				.order-icon {
					.iconfont {
						font-size: 56rpx;
						color: #ee5a52;
					}
				}
			}
		}
	}
</style>
